<!-- 个人中心 -->
<template>
	<view class="container">
		<view style="margin-top: 50rpx;margin-left: 24rpx;">
			<view style="padding: 1rpx 30rpx;min-height: 100rpx;">
				<input v-model="mobile" style="font-size: 30rpx;border-bottom: 1px solid #E5E5E5;min-height: 80rpx;"
					placeholder="请输入手机号" />
			</view>
			<view style="margin-top: 24rpx;padding: 1rpx 30rpx;min-height: 100rpx;position: relative">
				<input style="font-size: 30rpx;border-bottom: 1px solid #E5E5E5;min-height: 100rpx;" v-model="captcha"
					placeholder="请输入验证码"></input>
				<view @click="getCode" v-if="!second"
					style="z-index: 99; width: 160rpx;height: 28px;border-radius: 44px 44px 44px 44px;opacity: 1;border: 1px solid #e9c83ce8;position: absolute;right: 24rpx;top: 26rpx;color: #e9c83ce8;display: flex;justify-content: center;align-items: center;font-size: 12px;">
					获取验证码</view>
				<view v-else
					style="width: 160rpx;height: 28px;border-radius: 44px 44px 44px 44px;opacity: 1;border: 1px solid #e9c83ce8;position: absolute;right: 24rpx;top: 26rpx;color: #e9c83ce8;display: flex;justify-content: center;align-items: center;font-size: 12px;">
					{{second}}s
				</view>
			</view>

		</view>
		<view style="display: flex;justify-content: center;align-items: center;">
			<view class="denglu1" @click="toLogin">
				同意协议并登录
			</view>
		</view>
		<!-- 协议 -->
		<view class=" u-flex u-row-center agreement-box">
			<u-checkbox v-model="protocol" shape="circle" active-color="#e9c83ce8">
				<view class="agreement-text u-flex u-col-center">
					选中登录代表您已同意
					<view class="tcp-text u-flex u-col-center">
						<view @tap.stop="$Router.push({ path: '/pages/public/richtext', query: { id: 0 } })">《用户服务协议》
						</view>
					</view>
				</view>
			</u-checkbox>
		</view>
		<u-modal :value="isweishenhe" :show-confirm-button="true" @confirm="confirmAudit" :confirm-color="'#FFFFFF'"
			:confirm-style="confirmStyle" :confirm-text="'我知道了'" :title="' '">
			<view class="slot-content">
				<view class="audit_img">
					<image class="audit_img_top" src="@/static/images/5c8352de0bcc21.png"></image>
				</view>
				<view class="audit_title">入驻信息审核中</view>
				<view class="audit_sub_title">请耐心等待工作人员审核</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';

	import {
		mobilelogin
	} from "@/api/merchat.js"
	export default {
		components: {

		},
		data() {
			return {
				mobile: '',
				captcha: "",
				second: 0,
				protocol: false,
				isweishenhe: false,
				confirmStyle: {
					'width': '69%',
					'margin': '40rpx auto',
					'background': '#D9D9D9 linear-gradient(90deg, #e9c83ce8 0%, #FF6E6D 100%)',
					'border-radius': '60rpx',
					'flex': 'inherit'
				},
			};
		},
		computed: {

		},
		onLoad() {

			// let token = await wechat.getWxMiniProgramSessionKey(true)
			// console.log(token)
		},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal']),
			confirmAudit() {
				this.isweishenhe = false;
			},
			toRegister() {
				uni.navigateTo({
					url: 'pages/index/register'
				})
			},
			getCode() {

				let that = this
				that.$http(
					'common.smsSend', {
						mobile: that.mobile,
						event: 'mobilelogin'
					},
					'获取验证码中...'
				).then(res => {
					if (res.code === 1) {
						let timer = null;
						clearInterval(timer);
						that.second = 60
						timer = setInterval(() => {
							that.second -= 1;
							if (that.second < 1) {
								clearInterval(timer)
							}
						}, 1000)
						that.$u.toast('验证码已发送，请注意查收短信');
					} else {
						that.$u.toast(res.msg);
					}
				});
			},
			closeAuthModal() {
				this.$store.dispatch('showAuthModal');
			},
			toLogin() {

				const that = this
				if (!that.mobile && !that.$u.test.mobile(this.mobile)) {
					that.$u.toast('请输入手机号');
					return
				};
				if (!this.captcha) {
					that.$u.toast('请输入验证码');
					return
				};
				that.protocol = true;
				mobilelogin({
					mobile: that.mobile,
					captcha: that.captcha,
					openid: uni.getStorageSync('open_id'),
					user_type: '2'
				}).then(res => {
					console.log(res)
					if (res.code === 1) {
						if (!res.data.userinfo.check_state) {
							this.isweishenhe = true;
							return false
						}
						uni.showToast({
							title: '登录成功'
						})
						that.getUserInfo(res.data.userinfo.token);
						that.closeAuthModal()
						setTimeout(() => {
							uni.switchTab({
								url:"/pages/index/index"
							})
						}, 800)
					} else {
						that.$u.toast(res.msg);
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.container {
		height: 98vh;
	}

	.denglu1 {
		width: 344px;
		margin: 0 20px;
		height: 44px;
		background: #4f83fd;
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
		font-size: 16px;
		margin-top: 180rpx;
		color: #FFFFFF;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title1 {
		font-size: 16px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 19px;
		margin-top: 40rpx;
		text-align: center;
	}

	.agreement-box {
		position: fixed;
		bottom: 70rpx;
		width: 100%;
		margin: 80rpx auto 0;

		.protocol-check {
			transform: scale(0.7);
		}

		.agreement-text {
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;

			.tcp-text {
				color: #4f83fd;
			}
		}
	}

	.slot-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.audit_img {
			width: 160rpx;
			height: 160rpx;

			.audit_img_top {
				width: 100%;
				height: 100%;
			}
		}

		.audit_title {
			font-size: 36rpx;
			font-weight: bold;
			color: #ffffff;
			line-height: 48rpx;
			margin: 20rpx auto 20rpx;
		}

		.audit_sub_title {
			font-size: 32rpx;
			font-weight: 500;
			color: #999999;
			line-height: 48rpx;
			margin: 10rpx auto 10rpx;
		}
	}
</style>